@import "~scss/variables";
@import "~scss/mixins";

$sw-search-bar-item-border-radius: $border-radius-default;
$sw-search-bar-item-color-label: var(--color-text-primary-default);
$sw-search-bar-item-color-type: var(--color-text-primary-default);
$sw-search-bar-item-hover-color-background: var(--color-background-brand-default);
$sw-search-bar-item-label-hover-color-text: var(--color-text-brand-default);

.sw-search-bar-item {
    border-radius: $sw-search-bar-item-border-radius;
    padding: 6px;

    .sw-search-bar-item__link {
        padding: 4px 10px;
        border-radius: $sw-search-bar-item-border-radius;
        display: flex;
        text-decoration: none;
        line-height: $line-height-sm;

        &:focus-visible {
            outline-offset: var(--scale-size-2);
            outline: var(--scale-size-2) solid var(--color-border-brand-selected);
        }
    }

    .mt-icon {
        margin-right: 20px;
        flex-shrink: 0;
    }

    .sw-search-bar-item__label {
        color: $sw-search-bar-item-color-label;
        font-size: $font-size-xs;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
    }

    .sw-search-bar-item__type {
        color: $sw-search-bar-item-color-type;
        font-size: $font-size-xxs;
        margin-left: auto;
    }

    &.is--active {
        background: $sw-search-bar-item-hover-color-background;

        .sw-search-bar-item__label {
            color: $sw-search-bar-item-label-hover-color-text;
        }
    }

    &--v2 {
        display: flex;
        align-items: center;
        padding: 3px 30px;
        margin: 0;
        border-radius: 0;

        .sw-search-bar-item__link {
            flex: 1;
        }

        .mt-icon {
            margin-left: 8px;
            margin-right: 2px;
        }

        .sw-search-bar-item__label {
            display: flex;
            flex: 1;
            justify-content: space-between;
        }

        .sw-shortcut-overview-item {
            display: none;
            width: 100%;
            height: 16px;
            text-align: right;
            margin: 0 10px;

            span {
                padding: 0 4px;
                font-size: $font-size-xxs;
            }
        }

        &.is--active .sw-shortcut-overview-item {
            display: block;
        }

        .sw-highlight-text:first-child {
            @include truncate;

            width: 350px;
        }

        .sw-highlight-text:not(:first-child) {
            color: $color-gray-500;
        }
    }
}
